<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test7</title>
    <style>
        .div-buttom,.div-top{

            margin: 20px;
            display: flex;
            flex-flow:row nowrap;
            align-items: center;
            justify-content: center;
            border: 1px solid black;
            width: 700px;
            height: 250px;
        }
        .div-buttom-top-left-right-1{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
            width: 320px;
            height: 200px;
            border: 1px solid black;
        }
        .div-buttom-top-left-right-2{
            margin-left: 10px;
            display: flex;
            align-items: center;
            justify-content:center;
            width: 120px;
            height: 150px;
            border: 1px solid black;
        }
        .div-buttom-top-left-right-3{
            margin-left: 5px;
            width: 40px;
            height: 30px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="div-top" id="div-top">
    1
    <div class="div-buttom-top-left-right-1" >2
        <div class="div-buttom-top-left-right-2" >3
            <div class="div-buttom-top-left-right-3" >4</div>
            <div class="div-buttom-top-left-right-3" >4</div>
        </div>
        <div class="div-buttom-top-left-right-2" >3
            <div class="div-buttom-top-left-right-3" >4</div>
            <div class="div-buttom-top-left-right-3" >4</div>
        </div>
    </div>
    <div class="div-buttom-top-left-right-1" >2
        <div class="div-buttom-top-left-right-2" >3
            <div class="div-buttom-top-left-right-3" >4</div>
            <div class="div-buttom-top-left-right-3" >4</div>
        </div>
        <div class="div-buttom-top-left-right-2" >3
            <div class="div-buttom-top-left-right-3" >4</div>
            <div class="div-buttom-top-left-right-3" >4</div>
        </div>
    </div>
</div>
<div class="div-buttom" id="div-buttom">1
    <div class="div-buttom-top-left-right-1" >2
        <div class="div-buttom-top-left-right-2" >3
            <div class="div-buttom-top-left-right-3" >4</div>
            <div class="div-buttom-top-left-right-3" >4</div>
        </div>
        <div class="div-buttom-top-left-right-2" >3
            <div class="div-buttom-top-left-right-3" >4</div>
            <div class="div-buttom-top-left-right-3" >4</div>
        </div>
    </div>
    <div class="div-buttom-top-left-right-1" >2
        <div class="div-buttom-top-left-right-2" >3
            <div class="div-buttom-top-left-right-3" >4</div>
            <div class="div-buttom-top-left-right-3" >4</div>
        </div>
        <div class="div-buttom-top-left-right-2" >3
            <div class="div-buttom-top-left-right-3" >4</div>
            <div class="div-buttom-top-left-right-3" >4</div>
        </div>
    </div>
</div>
<button  id="but1">前序</button>
<button  id="but2">中序</button>
<button  id="but3">后序</button>
<script>

    var div_top=document.getElementById("div-top");
    var div_buttom=document.getElementById("div-buttom");
    var but1=document.getElementById("but1");
    var but2=document.getElementById("but2");
    var but3=document.getElementById("but3");
    var arr=[];
    var toggle=false;
    var last;

    but1.onclick=function () {
        if(!toggle){
            toggle=true;
            rest();
            pre(div_top);
            pre(div_buttom);
            changColor();
        }
    }
    but2.onclick=function () {
        if(!toggle){
            toggle=true;
            rest();
            inOrder(div_top);
            inOrder(div_buttom);
            changColor();
        }
    }
    but3.onclick=function () {
        if(!toggle){
            toggle=true;
            rest();
            post(div_top);
            post(div_buttom);
            changColor();
        }
    }
    function pre(node) {
        if (node){
            arr.push(node);
            pre(node.firstElementChild);
            pre(node.lastElementChild);
        }
    }
    function inOrder(node) {
        if (node){
            inOrder(node.firstElementChild);
            arr.push(node);
            inOrder(node.lastElementChild);
        }
    }
    function post(node) {
        if (node){
            post(node.firstElementChild);
            post(node.lastElementChild);
            arr.push(node);
        }
    }
    function changColor(){
        for(var i=0; i<arr.length; i++){
            setTimeout(function(i){
                return function(){
                    if(i == arr.length-1){
                        toggle = false;
                        }
                    if(last){
                        last.style.background = "white";
                        }
                    arr[i].style.background = "orange";
                    last = arr[i];
                    }
                }(i),i*700)
            }
        }
    function rest(){
        arr = [];
        if(last){
            last.style.background = "white";
            }
        }
</script>
</body>
</html>